<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="commons/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

</head>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style type="text/css">
			html,body{height: 100%;margin: 0;padding: 0;}
			a{text-decoration:none}
			.nav{
				height: 60px;background-color: #38B3D5;
			}
			.nav1{
				color:#EBF8FB;
				line-height: 60px;
				height: 60px;
				float: left;
				margin-left: 5%;
				font-size: 20px;
			}
			.nav1 h2{
				margin: 0;
				font-weight: bolder;
				
			}
			.nav2{
				color: #EBF8FB;
				text-align: center;
				float: left;
				height: 50px;
				line-height: 60px;
				width: 85%;
				font-size: 22px;
			}
			.container{
				display: -webkit-box;
				-webkit-box-orient: vertical;/*纵向布局*/
				height: 100%;
			}
			.content{
				-webkit-box-flex: 1;
				overflow: auto;
				background-color: #F0EFF5;
			}
			.tx{
				width: 95%;
				background-color: white;
				height: 90px;
				line-height: 90px;
				padding-left: 5%;
				color: #959595;
				font-weight: bolder;
			}
			.tx-logo{
				height: 70px;
				width: 70px;
				float: right;
				margin-right: 12%;
				margin-top: 10px;
			}
			.tx-logo img{
				width: 100%;
			}
			.tx-fh{
				height: 25px;
				float: right;
				margin-right: -95px;
				margin-top: 5px;
			}
			.tx-fh img{
				height: 100%;
			}
			.center{
				margin-top: 5px;
				background-color: white;
				font-family: "微软雅黑";
				font-size: 1em;
				width: 100%;
			}
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			li{
				width: 100%;
				height: 45px;
				border-bottom: 2px solid #F0EFF5;
				line-height: 45px;
				color: #959595;
			}
			.nr{
				float: right;
				height: 100%;
				line-height: 35px;
				margin-right: 18%;
				font-family: "微软雅黑";
				color: #3C3C3C;
				font-weight: bolder;
			}
			.left{
				width: 21%;
				height: 45px;
				float: left;
				padding-left: 5px;
			}
			.cet{
				width: 65%;
				height: 45px;
				float: left;
				text-align: end;
				color: black;
			}
			.right{
				width: 10%;
				height: 45px;
				float: right;
			}
			.right img{
				height: 25px;
				margin-top: 10px;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="nav">
				<div class="nav1"><h2><a href="ziliao"><</a></h2></div>
				<div class="nav2">
					设置个人资料
				</div>
			</div>
			<div class="content">
				<div class="tx">
					头像
					<div class="tx-logo">
						<img src="${ctx}/static/upload/${userMessage.picture}"/>
					</div>
					<div class="tx-fh">
						<a href="settouxiang"><img src="${ctx }/static/img/img-gr/gr-7.png"/></a>
					</div>
				</div>
				<div class="center">
					<ul>
						<li>
							<div class="left">
								姓名
							</div>
							<div class="cet">
								${userMessage.getName() }
							</div>
							<div class="right">
								<a href="setname"><img src="${ctx }/static/img/img-gr/gr-7.png"/></a>
							</div>
						</li>
						<li>
							<div class="left">
								性别
							</div>
							<div class="cet">
								${userMessage.getSex()}
							</div>
							<div class="right">
								<a href="setsex"><img src="${ctx }/static/img/img-gr/gr-7.png"/></a>
							</div>
						</li>
						
						<li>
							<div class="left">
								生日
							</div>
							<div class="cet"style="opacity: 0.3;">
								${userMessage.getBirthday() }
							</div>
							<div class="right">
								<a href="setbirthday"><img src="${ctx }/static/img/img-gr/gr-7.png"/></a>
							</div>
						</li>
						<li>
							<div class="left">
								所在城市
							</div>
							<div class="cet" style="opacity: 0.3;">
								点击选择
							</div>
							<div class="right">
								<img src="${ctx }/static/img/img-gr/gr-7.png"/>
							</div>
						</li>
						<li>
							<div class="left">
								详细信息
							</div>
							<div class="cet">
								${userMessage.getAddress() }
							</div>
							<div class="right">
								<a href="setxxdz"><img src="${ctx }/static/img/img-gr/gr-7.png"/></a>
							</div>
						</li>
						<li>
							<div class="left">
								身份证
							</div>
							<div class="cet">
								${userMessage.getIdCard()}
							</div>
							<div class="right">
								<a href="setidcard"><img src="${ctx }/static/img/img-gr/gr-7.png"/></a>
							</div>
						</li>
						<li>
							<div class="left">
								联系电话
							</div>
							<div class="cet">
								${userMessage.getUserPhone() }
							</div>
							<div class="right">
								<a href="setphone"><img src="${ctx }/static/img/img-gr/gr-7.png"/></a>
							</div>
						</li>
						<li>
							<div class="left">
								其它电话
							</div>
							<div class="cet">
								${userMessage.getUserPhones() }
							</div>
							<div class="right">
								<a href="setphones"><img src="${ctx }/static/img/img-gr/gr-7.png"/></a>
							</div>
						</li>
						<li>
							<div class="left">
								社保账户
							</div>
							<div class="cet">
								${userMessage.getQQ() }
							</div>
							<div class="right">
								<a href="setqq"><img src="${ctx }/static/img/img-gr/gr-7.png"/></a>
							</div>
						</li>
						<li>
							<div class="left">
								邮箱
							</div>
							<div class="cet">
								${userMessage.getEmail() }
							</div>
							<div class="right">
								<a href="setemail"><img src="${ctx }/static/img/img-gr/gr-7.png"/></a>
							</div>
						</li>
					</ul>
				</div>
			</div>
			
		</div>
	</body>
</html>